<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>潮汕明珠 - 汕头 - 文化特色</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引用自定义样式 -->
    <link rel="stylesheet" href="style.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#D93A3E',
                        secondary: '#F2A359',
                        accent: '#3D8B37',
                        neutral: '#F5F5F5',
                        dark: '#2C3E50',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Noto Serif SC', 'Georgia', 'serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="bg-neutral font-sans text-dark scroll-smooth">
    <!-- 导航菜单 -->
    <header class="header shadow-md" style="background-color: #3182ce;">
        <div class="container mx-auto flex items-center justify-between py-2 px-4">
            <div class="flex items-center gap-4">
                <div class="logo">
                    <img src="image/logo2.jpg" width="60" height="60" class="rounded-lg shadow" alt="汕头logo">
                </div>
                <span class="text-white text-2xl font-bold tracking-wide drop-shadow">潮汕明珠 · 汕头</span>
            </div>
            <nav class="nav hidden md:flex gap-4 items-center">
                <a href="index.html" class="font-bold px-4 py-2 rounded shadow hover:bg-yellow-400 transition" style="background-color: #3182ce; color: #fff;">首 页</a>
                <div class="dropdown relative">
                    <a href="index.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">家乡介绍 <i class="fa fa-angle-down ml-1"></i></a>
                    <div class="dropdown-content absolute left-0 mt-2 bg-white rounded shadow-lg hidden group-hover:block z-20 min-w-[120px]">
                        <a href="history.html" class="block px-4 py-2 text-dark hover:bg-neutral">历史沿革</a>
                        <a href="culture.html" class="block px-4 py-2 text-dark hover:bg-neutral">文化特色</a>
                    </div>
                </div>
                <div class="dropdown relative">
                    <a href="about.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">景点推荐 <i class="fa fa-angle-down ml-1"></i></a>
                    <div class="dropdown-content absolute left-0 mt-2 bg-white rounded shadow-lg hidden group-hover:block z-20 min-w-[120px]">
                        <a href="dao.html#spot1" class="block px-4 py-2 text-dark hover:bg-neutral">南澳岛</a>
                        <a href="gy.html#spot2" class="block px-4 py-2 text-dark hover:bg-neutral">小公园</a>
                    </div>
                </div>
                <a href="gallery.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">特色美食</a>
                <a href="contact.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">传统文化</a>
            </nav>
            <!-- 移动端菜单按钮 -->
            <div class="caidan md:hidden text-white text-2xl cursor-pointer" id="menu-toggle">
                <i class="fa fa-bars"></i>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <nav class="nav-mobile md:hidden bg-primary px-4 py-2 hidden flex-col gap-2" id="mobile-menu">
            <a href="index.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">首页</a>
            <a href="index.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">家乡介绍</a>
            <a href="history.html" class="block px-4 py-2 text-white hover:bg-neutral">历史沿革</a>
            <a href="culture.html" class="block px-4 py-2 text-white hover:bg-neutral">文化特色</a>
            <a href="about.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">景点推荐</a>
            <a href="dao.html#spot1" class="block px-4 py-2 text-white hover:bg-neutral">南澳岛</a>
            <a href="gy.html#spot2" class="block px-4 py-2 text-white hover:bg-neutral">小公园</a>
            <a href="gallery.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">特色美食</a>
            <a href="contact.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">传统文化</a>
        </nav>
    </header>

    <!-- 文化特色内容 -->
    <section id="culture" class="py-20 bg-neutral">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16 reveal">
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-primary mb-4">汕头传统文化</h2>
                <div class="w-20 h-1 bg-secondary mx-auto mb-6"></div>
            </div>

            <!-- 营老爷 -->
            <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 reveal mb-8">
                <div class="relative overflow-hidden group">
                    <div class="slider-container flex transition-transform duration-500 ease-in-out" data-slider="yinglaoye">
                        <img src="image/yinglaoye1.jpg" alt="营老爷活动" class="min-w-full h-[clamp(200px,50vw,700px)] object-contain">
                        <img src="image/yinglaoye2.jpg" alt="营老爷巡游队伍" class="min-w-full h-[clamp(200px,50vw,700px)] object-contain">
                        <img src="image/yinglaoye3.jpg" alt="营老爷祭神仪式" class="min-w-full h-[clamp(200px,50vw,700px)] object-contain">
                    </div>
                    
                    <!-- 滚动控制按钮 -->
                    <button class="slider-control absolute top-1/2 left-2 -translate-y-1/2 bg-white/30 hover:bg-white/60 text-white w-8 h-8 rounded-full flex items-center justify-center transition-all opacity-0 group-hover:opacity-100" data-direction="prev" data-target="yinglaoye">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <button class="slider-control absolute top-1/2 right-2 -translate-y-1/2 bg-white/30 hover:bg-white/60 text-white w-8 h-8 rounded-full flex items-center justify-center transition-all opacity-0 group-hover:opacity-100" data-direction="next" data-target="yinglaoye">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                    
                    <!-- 指示器 -->
                    <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1">
                        <span class="slider-dot w-2 h-2 rounded-full bg-white/50 transition-all" data-index="0" data-target="yinglaoye"></span>
                        <span class="slider-dot w-2 h-2 rounded-full bg-white/50 transition-all" data-index="1" data-target="yinglaoye"></span>
                        <span class="slider-dot w-2 h-2 rounded-full bg-white/50 transition-all" data-index="2" data-target="yinglaoye"></span>
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="text-2xl font-bold mb-2 text-primary">潮阳营老爷</h3>
                    <p class="text-gray-600 mb-4">
                        营老爷是汕头潮阳地区一项盛大的民俗活动，通常在春节期间举行。“老爷”在潮汕地区指的是各种神明，营老爷就是把神像从庙里请出来，在社区里巡游。巡游队伍包括彩旗队、锣鼓队、舞龙舞狮队等，场面热闹非凡。人们会在神像经过的地方摆上祭品，燃放鞭炮，以祈求新的一年风调雨顺、平安幸福。这一活动不仅是对神明的敬仰，更是凝聚社区居民情感、传承地方文化的重要方式。
                    </p>
                </div>
            </div>

            <!-- 年底拜神活动 -->
            <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 reveal mb-8">
                <div class="relative overflow-hidden group">
                    <div class="slider-container flex transition-transform duration-500 ease-in-out" data-slider="baishen">
                        <img src="image/baishen1.jpg" alt="年底拜神祭品" class="min-w-full h-[clamp(200px,50vw,700px)] object-contain">
                        <img src="image/baishen2.jpg" alt="家庭拜神仪式" class="min-w-full h-[clamp(200px,50vw,700px)] object-contain">
                        <img src="image/baishen3.jpg" alt="传统祭品展示" class="min-w-full h-[clamp(200px,50vw,700px)] object-contain">
                    </div>
                    
                    <!-- 滚动控制按钮 -->
                    <button class="slider-control absolute top-1/2 left-2 -translate-y-1/2 bg-white/30 hover:bg-white/60 text-white w-8 h-8 rounded-full flex items-center justify-center transition-all opacity-0 group-hover:opacity-100" data-direction="prev" data-target="baishen">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <button class="slider-control absolute top-1/2 right-2 -translate-y-1/2 bg-white/30 hover:bg-white/60 text-white w-8 h-8 rounded-full flex items-center justify-center transition-all opacity-0 group-hover:opacity-100" data-direction="next" data-target="baishen">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                    
                    <!-- 指示器 -->
                    <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1">
                        <span class="slider-dot w-2 h-2 rounded-full bg-white/50 transition-all" data-index="0" data-target="baishen"></span>
                        <span class="slider-dot w-2 h-2 rounded-full bg-white/50 transition-all" data-index="1" data-target="baishen"></span>
                        <span class="slider-dot w-2 h-2 rounded-full bg-white/50 transition-all" data-index="2" data-target="baishen"></span>
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="text-2xl font-bold mb-2 text-primary">年底拜神活动</h3>
                    <p class="text-gray-600 mb-4">
                        每年年底，汕头潮阳的各户人家都会举行“拜神”活动。这是一种传统习俗，人们会准备丰盛的祭品，如鸡、鸭、鱼、水果、糕点等，摆放在神台前，向神明表达感恩之情，并祈求来年家庭和睦、事业顺利、身体健康。拜神仪式通常包括上香、叩拜、祈祷等环节，整个过程庄重而虔诚。这一习俗体现了潮汕人对传统文化的尊重和传承，也反映了人们对美好生活的向往。
                    </p>
                </div>
            </div>

            <!-- 潮阳文光塔 -->
            <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 reveal">
                <div class="relative overflow-hidden group">
                    <div class="slider-container flex transition-transform duration-500 ease-in-out" data-slider="wenguangta">
                        <img src="image/wenguangta1.jpg" alt="文光塔全景" class="min-w-full h-[clamp(200px,50vw,700px)] object-contain">
                        <img src="image/wenguangta2.jpg" alt="文光塔细节" class="min-w-full h-[clamp(200px,50vw,700px)] object-contain">
                        <img src="image/wenguangta3.jpg" alt="文光塔夜景" class="min-w-full h-[clamp(200px,50vw,700px)] object-contain">
                    </div>
                    
                    <!-- 滚动控制按钮 -->
                    <button class="slider-control absolute top-1/2 left-2 -translate-y-1/2 bg-white/30 hover:bg-white/60 text-white w-8 h-8 rounded-full flex items-center justify-center transition-all opacity-0 group-hover:opacity-100" data-direction="prev" data-target="wenguangta">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <button class="slider-control absolute top-1/2 right-2 -translate-y-1/2 bg-white/30 hover:bg-white/60 text-white w-8 h-8 rounded-full flex items-center justify-center transition-all opacity-0 group-hover:opacity-100" data-direction="next" data-target="wenguangta">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                    
                    <!-- 指示器 -->
                    <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1">
                        <span class="slider-dot w-2 h-2 rounded-full bg-white/50 transition-all" data-index="0" data-target="wenguangta"></span>
                        <span class="slider-dot w-2 h-2 rounded-full bg-white/50 transition-all" data-index="1" data-target="wenguangta"></span>
                        <span class="slider-dot w-2 h-2 rounded-full bg-white/50 transition-all" data-index="2" data-target="wenguangta"></span>
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="text-2xl font-bold mb-2 text-primary">潮阳文光塔</h3>
                    <p class="text-gray-600 mb-4">
                        潮阳文光塔是汕头潮阳的标志性建筑之一，也是广东省文物保护单位。它始建于宋代，历经多次修缮，具有独特的建筑风格和深厚的文化内涵。文光塔为八角七层楼阁式砖石塔，造型古朴典雅，塔内保存有许多精美的壁画和碑刻。它不仅是潮阳历史文化的象征，也是当地文人墨客的精神寄托，见证了潮阳地区的文化繁荣和发展。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer bg-dark text-white py-6 mt-10">
        <div class="container mx-auto text-center">
            <p>&copy; 2025 我的家乡. 保留所有权利.</p>
        </div>
    </footer>

    <!-- 移动端菜单脚本 -->
    <script>
    window.addEventListener('DOMContentLoaded', function() {
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        menuToggle.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });

        // 下拉菜单显示
        document.querySelectorAll('.dropdown').forEach(function(drop) {
            drop.addEventListener('mouseenter', function() {
                const content = drop.querySelector('.dropdown-content');
                if(content) content.classList.remove('hidden');
            });
            drop.addEventListener('mouseleave', function() {
                const content = drop.querySelector('.dropdown-content');
                if(content) content.classList.add('hidden');
            });
        });

        // 图片滚动功能
        const sliders = document.querySelectorAll('.slider-container');
        
        // 初始化所有滑块
        sliders.forEach(slider => {
            const sliderId = slider.getAttribute('data-slider');
            const slides = slider.querySelectorAll('img');
            const totalSlides = slides.length;
            let currentIndex = 0;
            
            // 设置初始状态
            updateSlider(sliderId, currentIndex);
            
            // 自动播放
            setInterval(() => {
                currentIndex = (currentIndex + 1) % totalSlides;
                updateSlider(sliderId, currentIndex);
            }, 5000);
            
            // 绑定控制按钮事件
            document.querySelectorAll(`.slider-control[data-target="${sliderId}"]`).forEach(control => {
                control.addEventListener('click', function() {
                    const direction = this.getAttribute('data-direction');
                    currentIndex = direction === 'prev' 
                        ? (currentIndex - 1 + totalSlides) % totalSlides 
                        : (currentIndex + 1) % totalSlides;
                    updateSlider(sliderId, currentIndex);
                });
            });
            
            // 绑定指示器事件
            document.querySelectorAll(`.slider-dot[data-target="${sliderId}"]`).forEach(dot => {
                dot.addEventListener('click', function() {
                    const index = parseInt(this.getAttribute('data-index'));
                    currentIndex = index;
                    updateSlider(sliderId, currentIndex);
                });
            });
        });
        
        // 更新滑块位置和指示器
        function updateSlider(sliderId, index) {
            const slider = document.querySelector(`.slider-container[data-slider="${sliderId}"]`);
            const slides = slider.querySelectorAll('img');
            const slideWidth = slides[0].offsetWidth;
            
            // 移动滑块
            slider.style.transform = `translateX(-${index * slideWidth}px)`;
            
            // 更新指示器
            document.querySelectorAll(`.slider-dot[data-target="${sliderId}"]`).forEach((dot, i) => {
                if (i === index) {
                    dot.classList.add('bg-white');
                    dot.classList.remove('bg-white/50');
                } else {
                    dot.classList.remove('bg-white');
                    dot.classList.add('bg-white/50');
                }
            });
        }
    });
    </script>
</body>
</html>